<template>
	<om-addpage :menuName="menuName" :busCode="busCode" @formSubmit='formSubmit'>
		<view v-show="false">
			<input v-model="formdata.zposId" name="zposId" />
			<input v-model="formdata.userId" name="userId" />
			<input v-model="formdata.remark" name="remark" />
		</view>
		<uni-list title="试用期信息">
			<uni-list-item :showArrow="false">
				<view class="tui-flex">
					<view class="tui-col-4"><om-label label="制表岗位"></om-label></view>
					<view class="tui-right tui-col-8">
						<picker mode="selector" name="zposIndex" @change="zposFunc" :range="zposList" :value="zposIndex" range-key="posname">
							<view>{{ zposList.length ? zposList[zposIndex].posname : '' }}</view>
						</picker>
					</view>
				</view>
			</uni-list-item>
			<uni-list-item   :showArrow="false">
				<view class="tui-flex">
					<view class="tui-col-4"><om-label label="姓名" required></om-label></view>
					<view class="tui-left tui-col-8">
						<picker @change="bindUserChange" name="userIndex"  mode="selector" :value="userIndex" :range="userList" range-key="username" style="width: 100%;">
							<view class="tui-right">{{ userList.length ? userList[userIndex].username : '' }}</view>
						</picker>
					</view>
				</view>
			</uni-list-item>
			<uni-list-item  :showArrow="false">
				<view class="tui-flex">
					<view class="tui-col-4"><om-label label="原试用期到期日"></om-label></view>
					<view class="tui-right  tui-col-8">
						{{date?date:''}}
					</view>
				</view>
			</uni-list-item>
			<uni-list-item  :showArrow="false">
				<view class="tui-flex">
					<view class="tui-col-4"><om-label label="调整后试用期到期日" required></om-label></view>
					<view class="tui-right  tui-col-8" >
						<picker mode="date" 
						@change="bindDateChange"
						 v-model="formdata.adjustProbationDate" 
						name="adjustProbationDate"  
						:value="formdata.adjustProbationDate">
							<view>{{formdata.adjustProbationDate.trim()?formdata.adjustProbationDate:"请选择"}}</view>
						</picker>
					</view>
				</view>
			</uni-list-item>
			<uni-list-item  :showArrow="false">
				<view class="tui-flex">
					<view class="tui-col-4"><om-label label="延长试用期原因" required></om-label></view>
					<view class="tui-left tui-col-8"><textarea :auto-height="true" class="om-textarea" v-model="formdata.remark" name="remark" placeholder="请输入..." /></view>
				</view>
			</uni-list-item>
		</uni-list>
	</om-addpage>
</template>

<script>
	const form = require("../../../static/js/formValidation.js")
	import dateTimePicker from '@/static/js/dateTimePicker.js';
	import {loadZpos} from '@/static/js/formOld.js';
	import { ignoreHtml} from '@/static/js/common.js';
	import { mapState } from 'pinia';
	import {useLoginUserStore} from '@/stores/login-user.js';
export default {
	provide() {
		return {
			formPage: this
		};
	},
	data() {
		return {
			formdata:{
				zposId:'',
				userId:'',
				adjustProbationDate:dateTimePicker.getNewDate(),
				remark:""
			},
			zposIndex:0,
			zposList:[],
			userIndex: 0,
			userList:[],
			date:'',
			menuName: '',
			id: '',
			busCode: ''
		};
	},
	computed: mapState(useLoginUserStore, ['userName', 'userId']),
	methods: {
		/**
		 * 制表岗位
		 */
		zposFunc(e) {
			let _that = this;
			_that.zposIndex = e.target.value;
			//加载姓名
			_that.loadUserNameFunc();
		},
		/**
		 * 人员选择
		 */
		bindUserChange(e) {
			this.userIndex = e.target.value;
			this.formdata.userId  = this.userList[this.userIndex].id
			this.verifyUserFunc()
		},
		
		  /**
		   * 选择姓名验证
		   */
		  verifyUserFunc() {
		    let _that = this
			_that.om.request('wxProbationDelay/verifyUser',{
				userId: _that.userList[_that.userIndex].id
			}).then(res=>{
				if(res.succeed){
					 _that.origProbationDateFunc();
				}else{
					_that.om.toast(ignoreHtml(res.msg))
				}
			})
		  },
		  /**
		   * 原试用期到期日
		   */
		  origProbationDateFunc() {
		    let _that = this;
			_that.om.request('wxProbationDelay/getNewDataInfo',{
				userId: _that.userList[_that.userIndex].id
			}).then(res=>{
				if(res.succeed){
					 _that.date = res.value.posResponse.origProbationDate
				}else{
					_that.om.toast(ignoreHtml(res.msg))
				}
			})
		  },

		/**
		 * 日期选择
		 */
		bindDateChange(e) {
			this.formdata.adjustProbationDate = e.detail.value;
		},
		
		formSubmit: function(formdata) {
			//表单规则
			let rules = [{
				name: "zposId",
				rule: ["required"], 
				msg: ["请选择制表岗位"]
			}, {
				name: "adjustProbationDate",
				rule: ["required"],
				msg: ["请选择调整后试用期到期日"]
			}, {
				name: "userId",
				rule: ["required"],
				msg: ["请选择被调整人"]
			}, {
				name: "remark",
				rule: ["required"],
				msg: ["请输入延长试用期原因"]
			}];
			let _that = this;
			if(!formdata || Object.keys(formdata).length==0){
				formdata = _that.formdata
			}
			let checkRes = form.validation(formdata, rules);
			if (!checkRes) {
				_that.om.formSave('wxProbationDelay/save', formdata, _that);
			} else {
				_that.om.toast(checkRes);
			}
			
		},
		initLoad(){
			loadZpos(this, 'loadUserNameFunc','您没有处于试用期的下级人员');
		},
		/**
		   * 加载姓名
		   */
		  loadUserNameFunc() {
		    let _that = this
			_that.om.request('probationUserList/getUserListByParentPosId',{
				posId: _that.zposList[_that.zposIndex].id
			}).then(res=>{
				//if(res instanceof Array){
				if(Object.prototype.toString.call(res)==='[object Array]'){
					if(!res.length){
						_that.om.toast('当前制表岗位没有处于试用期的下级人员',3000)
					}else{
						_that.userList = res
						_that.verifyUserFunc();
					}
				}
			})
		  },
	},
	onLoad: function(options) {
		let _that = this
		_that.menuName = options.title || '试用期延长'
		uni.setNavigationBarTitle({
			title: _that.menuName
		});
		_that.busCode = options.code;
		_that.om.request('wxProbationDelay/getConst').then(res => {
			if (res.succeed) {
				_that.busCode = res.value.busCode || "HRS0124";
				_that.initLoad();
			}
		});
	},

	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow: function() {
		this.saveFlag = false;
	}
};
</script>

<style>
</style>
